/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    z-index: inherit;
    min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
    min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
    border-block-end: 1px solid #0000;
    border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
    border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
    margin: 0;
    position: relative;
}

:host(:first-child) {
    border-block-start: 1px solid #0000;
    border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
    border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
}

#heading {
    box-sizing: border-box;
    margin: 0;
    position: relative;
}

.iconContainer {
    inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
    block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
    color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
    justify-content: center;
    align-items: center;
    padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
    display: flex;
    position: absolute;
    inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
}

.iconContainer:dir(rtl),
:host([dir="rtl"]) .iconContainer {
    transform: scaleX(-1);
}

#content {
    padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
    padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
    color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
    font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
    font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
    font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
    font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
    line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
    display: none;
}

#header {
    box-sizing: border-box;
    padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space));
    min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
    line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
    font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
    font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
    font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
    appearance: none;
    text-align: start;
    inline-size: 100%;
    color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
    background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
    border: 0;
    justify-content: flex-start;
    align-items: center;
    padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
    padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
    display: flex;
    position: relative;
}

#header:focus {
    outline: none;
}

#header:focus:after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

#header:focus-visible {
    border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
    outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
    background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
    color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
    outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
}

#header:active {
    background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
    color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
}

:host([disabled]) #header,
:host([disabled]) #header:focus-visible {
    color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
    background-color: initial;
}

@media (hover: hover) {
    #header:hover {
        background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
    }

    #header:hover,
    #header:hover + .iconContainer {
        color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
    }

    :host([open]) #header:hover {
        background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
    }

    :host([disabled]) #header:hover {
        color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
        background-color: initial;
    }
}

:host([disabled]) #header + .iconContainer {
    color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
}

:host([disabled]) #content {
    color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
}

@media (forced-colors: active) {
    #header:after {
        forced-color-adjust: none;
        content: "";
        position: absolute;
        inset-inline-start: 0;
    }
}

:host([open]) > #heading > .iconContainer > .indicator,
:host([open]) > .iconContainer > .indicator {
    transform: rotate(90deg);
    transform: var(--spectrum-logical-rotation,) rotate(90deg);
}

:host([open]) > #content {
    display: block;
}

:host([disabled]) #header {
    cursor: default;
}
